<!--
 * @Description:
 * @Version: 1.668
 * @Autor: 地虎降天龙
 * @Date: 2023-11-05 08:42:01
 * @LastEditors: 地虎降天龙
 * @LastEditTime: 2024-07-18 09:46:33
-->
<script lang="ts" setup>

import { OrbitControls, Html } from '@tresjs/cientos'
import { ref } from 'vue'



const position = ref([1, 1, 0])
const test = () => {
	position.value = [0, 0, 1]
}
const CameraPosition = ref([4, 4, 4])
</script>

<template>
	<TresCanvas window-size>
		<TresPerspectiveCamera :position="CameraPosition" />
		<TresMesh :position="[-2, 0, -2]" name="box 2" @click="test">
			<TresBoxGeometry :args="[1, 1, 1]" />
			<TresMeshNormalMaterial />
			<Html :center="true" transform :position="position">
			<h1 class="bg-white text-xs p-0.5 rounded -mt-10">
				Box2 📦
			</h1>

			</Html>
		</TresMesh>
		<OrbitControls />
		<TresGridHelper />
		<TresAmbientLight :intensity="1" />
	</TresCanvas>
</template>
